<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>兑换明细列表</title>
	<link rel="stylesheet" type="text/css" href="../../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
	<style>
    html,body{height: 100%;width: 100%;background: #fff !important;}
    #app{height: 100%;background: #fff !important;}
		[v-cloak] {display: none;}
		.aui-info{padding:15px 15px;background: #fff;border-bottom:1px dashed #dcdcdc;}
		.aui-info-item,span{font-size: 14px !important;color:#eb5b46 !important;}
		.aui-info-item{color:#333 !important;}
		.aui-info-item span:nth-child(1){margin-right:50px;width: 60px;color:#333 !important;}
	</style>
</head>
<body>
	<div id="app">
			<div class="aui-info" v-for="index in data" v-cloak>
				<div class="aui-info-item">
						<span >{{index.type}}</span>
						<span v-if="index.from == '+'">+{{index.integral}}</span>
						<span style="color:#333 !important;" v-if="index.from == '-'">-{{index.integral}}</span>
				</div>
				<div class="aui-info-item">{{getDate(index.create_time)}}</div>
			</div>
	</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/vue.min.js"></script>
<script type="text/javascript">
	var app;
	apiready = function () {
		// 初始化数据
		initializeData();
		// 加载列表数据
		loadDate();
		// 下拉刷新页面数据
		api.refreshHeaderLoadDone();
		api.setRefreshHeaderInfo({
				loadingImg: 'widget://image/refresh.png',
				bgColor: '#fff',
				showTime: "false"
		}, function (ret, err) {
				if (ret) {
						app.whetherToLoading = true;
						app.isLast = 1;
						app.pullLoad = '正在加载中...';
						app.next_p = 1;
						loadDate()
				} else {
						api.refreshHeaderLoadDone();
				}
		});

		//上拉加载新一页数据 - 第三步（可选）
		if (app.whetherToLoading == false) {
				api.addEventListener({
						name: 'scrolltobottom',
						extra: {
								threshold: 20 //设置距离底部多少距离时触发，默认值为0，数字类型
						}
				}, function(ret, err) {
						if (app.isLast) {
								app.whetherToLoading = true;
								app.next_p++;
								loadDate();
						}else{
								api.toast({
								    msg: '已经到底了',
								    duration: 2000,
								    location: 'middle'
								});
						}
				});
		}
  }

	function initializeData(){
		app = new Vue({
      el: '#app',
      data: {
				whetherToLoading : false,//
				isLast : 1,  //是否到最后一页 0则没有了  1表示可以执行上拉加载
				next_p :1, //页码
				page_size : 20, //一页多少条
				data:[]
      }
    });
	}

	function loadDate(){
			$api.ajax({
					url: 'api/task/flow',
					method: 'get',
					data:{
							values:{
									type : 1,
									next_p :app.next_p, //页码
									page_size : app.page_size,  //每页条数
							}
					}
			}, function (ret, err) {
					api.refreshHeaderLoadDone();
					app.whetherToLoading = false;
					if (ret) {
							if(app.next_p == 1 && ret.data.list.length == 0){
									app.isLast = 0
									document.getElementById("app").innerHTML = "<p style='text-align:center;margin-top:50px;font-size:16px;'>暂无数据</p>"
									return;
							}
							if(app.next_p == 1){
									app.data = ret.data.list;
							}else{
									app.data = app.data.concat(ret.data.list);
							}
							if(ret.data.list.length < app.page_size){
									app.isLast = 0
									//没有数据
							}
					}
			})
	}

	function getDate(num){
			var now = new Date(num *  1000),
			y = now.getFullYear(),
			m = now.getMonth() + 1,
			d = now.getDate();
			//return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
			return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
	}
</script>
</html>
